<template>
  <div class="bread-container">
    <div class="bread">
      <span v-for="(item, index) in bread" :key="index" :class="[index === 0 ? 'isFirst' : '']">
        {{ item }} <span v-if="index!==bread.length-1">/</span>
      </span>
    </div>
    <div>
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: 'NavBarBread',
  props: {
    bread: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
  }
}
</script>

<style scoped lang="scss">
.bread-container {
  display: flex;
  line-height: 50px;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid #d8d8d8;
  margin-bottom: 15px;
  .bread{
    font-size: 14px;
    :last-of-type{
        color: #20a8ac;
    }
    .isFirst{
       padding-left: 15px;
       border-left: 5px solid #20a8ac;
    }
  }
}
</style>
